<template>
  <div class="User">
    <div class="chaxun">
      <el-form :inline="true" :model="formInline" ref="seachFrom">
        <el-form-item label="用户账号" prop="userAccout">
          <el-input v-model="formInline.userAccout"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="formInline.userName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="chongzhi">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="biaoge">
      <el-table
        ref="multipleTable"
        :data="tableData"
        stripe
        border
        tooltip-effect="dark"
        max-height="450"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="userAccout" label="用户账号" width="120" sortable></el-table-column>
        <el-table-column prop="userName" label="用户名" width="120" sortable></el-table-column>
        <el-table-column prop="userSex" label="用户性别" width="100">
          <template slot-scope="scope">
            <div>{{scope.row.userSex=='1'?'男' :scope.row.userSex=='0'?'女': 未知}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="150"></el-table-column>
        <el-table-column prop="email" label="邮箱地址" width="200"></el-table-column>
        <el-table-column prop="idCard" label="身份证号" width="180"></el-table-column>
        <el-table-column prop="score" label="积分金额" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,50,100, 200, 300, 400]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalnum"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        userAccout:"",
        userName:"",
        pagesize:"",
        pageNum:"",
        idAdmin:"0"
      },
      tableData:[],
      totalnum: 0,
      pagesize: 10,
      currentPage: 1,
    };
  },
  beforeMount() {
    this.getData();
  },
  methods: {
    getData() {
      this.formInline.pagesize=this.pagesize
      this.formInline.pageNum=this.currentPage
      this.$axios.post(this.$store.state.url+'/customer/listCustomers',this.formInline).then(res => {
          if (res.data.code == 1) {
            this.tableData=res.data.data.list
            this.totalnum=res.data.data.total
          }else{
            this.$message({
              showClose: false,
              message: res.data.msg,
              type: 'error'
            });
          }
        })
    },
    //重置
    chongzhi(){
      this.$refs["seachFrom"].resetFields()
      this.pagesize= 10
      this.currentPage= 1
      this.getData()
    },
    //查询
    onSubmit() {
      this.getData()
    },
    handleSizeChange(val) {
      this.pagesize=val
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentPage=val
      this.getData()
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.biaoge {
  margin-top: 30px;
}
.block {
  float: right !important;
}
</style>

<style>
.user .el-input__inner{
    width: 150px
}
</style>

